<template>
	<div class="main">
		<transition name="fade">
			<div class="menu-small" v-if="showBoolean">
				<div class="close-menu" @click="showBoolean = false"><i class="el-icon-circle-close"></i></div>
			</div>
		</transition>
		<div :class="showBoolean ? 'menu-small-box active' : 'menu-small-box'"><left></left></div>
		<top @showMmenu="show($event)"></top>
		<div class="sidebar-container"><left :class="$store.state.nav.small ? 'pc small' : 'pc'" @change="change($event)"></left></div>
		<div :class="$store.state.nav.small ? 'container small' : 'container'">
			<tags-view />
			<div class="main-content">
				<!-- <router-view class="container-bg" /> -->
				<transition name="fade-transform" mode="out-in">
					<keep-alive :include="cachedViews"><router-view :key="key" class="container-bg" /></keep-alive>
				</transition>
				<el-backtop target=".main-content" :bottom="80"></el-backtop>
			</div>
		</div>
	</div>
</template>

<script>
import top from '@/components/header.vue';
import left from '@/components/nav.vue';
import TagsView from '@/components/TagsView';
export default {
	computed: {
		cachedViews() {
			return this.$store.state.tagsView.cachedViews;
		},
		key() {
			return this.$route.path;
		}
	},
	data() {
		return {
			showBoolean: false
		};
	},
	methods: {
		// 显示移动端导航
		show(e) {
			this.showBoolean = e;
		},
		// 改变主体宽度
		change(e) {
			this.$store.dispatch('nav/isSmall', e);
		}
	},
	components: {
		top,
		left,
		TagsView
	}
};
</script>
